<template>
  <div style="width: 1000px; margin: 50px auto;">
    <h2>{{ this.paper.title }}</h2>
    <span>{{ this.paper.remark }}</span>
    <!--问题-->
    <div>
      <template v-for="(item, index) in this.questionList">
        <el-divider content-position="right"><i class="el-icon-mobile-phone"></i></el-divider>
        <h4>{{ index + 1 }}、{{ item.content }}</h4>

        <el-rate
            v-model="value[index]"
            show-text>
        </el-rate>

      </template>

      <el-divider content-position="right"><i class="el-icon-s-opportunity"></i></el-divider>
      <el-button round type="primary" :disabled="disabledSubmit" @click="submitAnser">提交 <i
          class="el-icon-position"></i> 问卷
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "Answer",
  data() {
    return {
      disabledSubmit: false,
      path: '',
      value: [],
      iconClasses: ['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3'],
      paper: {
        "id": 4,
        "courseId": 3,
        "title": "问卷1",
        "remark": "这是问卷1",
        "startDate": [
          2022,
          4,
          16,
          7,
          34,
          34
        ],
        "status": "",
        "code": null,
      },
      questionList: [
        {
          "id": 7,
          "paperId": 4,
          "targetId": 7,
          "content": "问题1",
          "type": null
        },
        {
          "id": 8,
          "paperId": 4,
          "targetId": 8,
          "content": "问题2",
          "type": null
        },
        {
          "id": 9,
          "paperId": 4,
          "targetId": 9,
          "content": "问题3",
          "type": null
        },
        {
          "id": 10,
          "paperId": 4,
          "targetId": 10,
          "content": "问题4",
          "type": null
        }
      ],
      answerList: [
        {
          questionId: null,
          value: 5
        }
      ]
    }
  },
  created() {
    let paperKey = this.$route.params.pathMatch
    console.log(paperKey)
    this.$axios.get("/paper" + paperKey).then(res => {
      this.paper = res.data.data
      this.questionList = res.data.data.questionList

      // 默认最高分数
      for (let i = 0; i < this.questionList.length; i++) {
        this.value[i] = 4
      }
    })
  },
  methods: {
    submitAnser() {
      console.log(this.value)
      for (let i = 0; i < this.questionList.length; i++) {
        let answer = {
          questionId: this.questionList[i].id,
          value: this.value[i]
        }
        this.answerList[i] = answer
      }
      console.log(this.answerList)

      this.$axios.post("/answer", this.answerList)
          .then(res => {
            this.$message({
              showClose: true,
              message: '问卷提交成功',
              type: 'success',
            });
            this.$router.push("/index")
          })
    }
  }
}
</script>

<style scoped>

</style>